<script>
import UserApi from '../../api/user';
import { mapStores } from 'pinia';
import { useUserStore } from '../../stores/user';

export default {
    data() {
        return {
            user: {}
        }
    },
    methods: {
        async getUserInfo() {
            try {
                let userId = this.userStore.userData.userId;
                const api = new UserApi();
                let res = await api.find(userId);
                this.user = res.data;
                console.log(this.user);
            } catch (err) {
                console.error(err);
                this.$myMessageBox("应用服务器访问错误！");
            }
        }
    },
    computed: {
        ...mapStores(useUserStore),
        lastLoginTime() {
            return new Date(this.user.lastLoginTime).toLocaleString();
        }
    },
    mounted() {
        this.getUserInfo();
    }
}
</script>

<template>
    <div class="user-profile">
        <div class="header">
            <h2>用户信息</h2>
            <p>
                <router-link class="button" :to="'/user/change-profile/' + user.id">修改个人信息</router-link>
                <router-link class="button" :to="'/user/change-password/' + user.id">修改密码</router-link>
                <a class="button" href="javascript:void(0);" @click="$goBack">返回</a>
            </p>
        </div>
        <div class="block">
            <fieldset>
                <legend>
                    <img :src="user.fullAvatar" :alt="user.username">
                    <span>个人信息</span>
                </legend>
                <dl>
                    <dt>用户名</dt>
                    <dd>{{ user.username }}</dd>
                </dl>
                <dl>
                    <dt>昵称</dt>
                    <dd>{{ user.nickname }}</dd>
                </dl>
                <dl>
                    <dt>姓名</dt>
                    <dd>{{ user.truename }}</dd>
                </dl>
                <dl>
                    <dt>用户组</dt>
                    <dd>{{ user.roleName }}</dd>
                </dl>
                <dl>
                    <dt>上次登录时间</dt>
                    <dd>{{ lastLoginTime }}</dd>
                </dl>
                <dl>
                    <dt>上次登录IP</dt>
                    <dd>{{ user.lastLoginIp }}</dd>
                </dl>
                <dl>
                    <dt>登录次数</dt>
                    <dd>{{ user.loginCount }}</dd>
                </dl>
            </fieldset>
        </div>
    </div>
</template>

<style scoped>
fieldset {
    padding: 10px;
    margin: 10px auto;
    width: 100%;
    color: #333;
    border: #06c dashed 1px;
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    box-sizing: border-box;
}

legend {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #06c;
    font-weight: 800;
    background: #fff;
    border: #06c solid 1px;
    padding: 3px 6px;
}

legend img {
    width: 32px;
    height: 32px;
}

dl {
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    min-width: 33.33333333%;
}

dl dt {
    background: #5f9be3;
    color: #fff;
    float: left;
    font-weight: bold;
    margin-right: 10px;
    padding: 5px;
    width: 50%;
}

dl dd {
    margin: 2px 10px 2px 0;
    padding: 5px;
    border-bottom: #a5a5a5 solid 1px;
    width: 100%;
}
</style>